﻿@page "/chart/moving-average-convergence-divergence-indicator"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Newtonsoft.Json

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample illustrates a stock chart with candle series and a moving average convergence divergence indicator. The trackball shows the information about the stock, MACD line, signal line and MACD histogram value of a day.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure a moving average convergence divergence indicator. The moving average convergence divergence indicator is based on the difference between two EMA's.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the moving average convergence divergence indicator can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/stock-chart/technical-indicators/#moving-average-convergence-divergence-macd'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
        <SfChart Title="AAPL - 2012-2017" Theme="@Theme">
            <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months" ZoomFactor="0.2" ZoomPosition="0.6">
                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
                <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
            </ChartPrimaryXAxis>
            <ChartPrimaryYAxis Title="Price" LabelFormat="${value}" Minimum="50"
                               Maximum="170" PlotOffset="25" Interval="30" RowIndex="1" OpposedPosition="true">
                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
                <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            </ChartPrimaryYAxis>
            <ChartAxes>
                <ChartAxis Name="secondary" OpposedPosition="true" RowIndex="0" Interval="3"
                           Minimum="-3.5" Maximum="3.5" Title="MACD">
                    <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
                    <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
                    <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
                    <ChartStriplines>
                        <ChartStripline ZIndex="ZIndex.Behind" Start="-3.5" End="3.5" Text="" Color="black" Visible="true" Opacity="0.03"></ChartStripline>
                    </ChartStriplines>
                </ChartAxis>
            </ChartAxes>
            <ChartRows>
                <ChartRow Height="40%"></ChartRow>
                <ChartRow Height="60%"></ChartRow>
            </ChartRows>
            <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
            <ChartLegendSettings Visible="false"></ChartLegendSettings>
            <ChartArea>
                <ChartAreaBorder Width="0"></ChartAreaBorder>
            </ChartArea>
            <ChartZoomSettings EnablePinchZooming="true" EnableSelectionZooming="true" Mode="ZoomMode.X"></ChartZoomSettings>
            <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical"></ChartCrosshairSettings>
            <ChartSeriesCollection>
                <ChartSeries DataSource="@ChartPoints" XName="Period" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open"
                             Width="2" Name="Apple Inc" Type="ChartSeriesType.Candle" BearFillColor="#2ecd71" BullFillColor="#e74c3d">
                </ChartSeries>
            </ChartSeriesCollection>
            <ChartIndicators>
                <ChartIndicator Type="TechnicalIndicators.Macd" SeriesName="Apple Inc" YAxisName="secondary" Fill="#6063ff" Period="3" FastPeriod="8" SlowPeriod="5" MacdType="MacdType.Both"
                                Width="2" MacdPositiveColor="#2ecd71" MacdNegativeColor="#e74c3d">
                </ChartIndicator>
            </ChartIndicators>
        </SfChart>
    </div>

@code{

    private Theme Theme { get; set; }
    public MACDChartData[] ChartPoints { get; set; } = new MACDChartData[] { };

    protected override void OnInitialized()
    {
        ChartPoints = JsonConvert.DeserializeObject<MACDChartData[]>(System.IO.File.ReadAllText("./wwwroot/data/chart/financial-data.json"));
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class MACDChartData
    {
        public DateTime Period { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Open { get; set; }
        public double Close { get; set; }
        public double Volume { get; set; }
    }
}
